import React, { lazy, Suspense } from 'react'
import {
  /*Routes, Route,*/ Navigate,
  RouteObject,
  useRoutes
} from 'react-router-dom'
const Home = lazy(() => import('@/components/Home'))
const About = lazy(() => import('@/components/About'))
const NotFound = lazy(() => import('@/components/NotFound'))

const routes: RouteObject[] = [
  {
    path: '/',
    element: <Navigate to="/home" />
  },
  {
    path: 'home',
    element: <Home />
  },
  {
    path: 'about',
    element: <About />
  },
  {
    path: '*',
    element: <NotFound />
  }
]

const Router = () => {
  return (
    <>
      <Suspense fallback="Loading...">{useRoutes(routes)}</Suspense>
    </>
  )
}
export default Router
